<script setup>
import { onMounted, ref, watch } from 'vue';

const props = defineProps({
  stepActive: Number
});

const active = ref(props.stepActive - 1); // 当前步骤的索引，与后端返回的索引差1
const customSteps = ref(['填写资料', '报名预缴费', '线下复核', '完成报名']);

// 监听 stepActive 的变化
watch(() => props.stepActive, (newVal) => {
  if (newVal !== undefined) {
    active.value = newVal - 1;
  }
}, {
  immediate: true // 立即执行一次
});


</script>

<template>
  <van-steps :active="active" direction="horizontal">
    <van-step v-for="(step, index) in customSteps" :key="index">
      <template #active-icon>
        <div class="active-box">{{ index + 1 }}</div>
      </template>
      <template #finish-icon>
        <van-icon name="success" color="#2c54c2" />
      </template>
      <!--      <template #inactive-icon>-->
      <!--        <div class="inactive-box">{{ index + 1 }}</div>-->
      <!--      </template>-->
      <p>{{ step }}</p>
    </van-step>
  </van-steps>
</template>

<style scoped>
.active-box,
.inactive-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  color: white;
  border-radius: 50%;
  background-color: transparent;
}

.active-box {
  background-color: #2c54c2;
}

.inactive-box {
  background-color: #969799;
}

.van-steps {
  background-color: #f6f8f8 !important;
  padding: 0 20px;
}

:deep(.van-step__circle-container) {
  background-color: #f6f8f8;
}

:deep(.van-step--finish) {
  color: #2c54c2;
}

:deep(.van-step__title.van-step__title--active p) {
  color: #2c54c2;
}

:deep(.van-step--finish .van-step__line) {
  background-color: #2c54c2;
}
</style>
